<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/web-frame/element/css/index.css" rel="stylesheet"/>
    <script src="/web-frame/element/js/vue.js"></script>
    <script src="/web-frame/element/js/index.js"></script>
    <script src="/web-frame/element/js/axios.js"></script>
    <script src="/web-frame/js/glob.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card" style="border-radius: 10px">
        <div style="padding: 20px">
            <div style="padding-bottom: 10px">
                <el-button-group>
                    <el-button @click="dialogFormVisible = true" >打开弹窗</el-button>
                    <el-button @click="open" type="primary">打开消息提示</el-button>
                    <el-button @click="dialogFormVisible_1 = true" type="success">打开描述弹窗</el-button>
                    <el-button type="info">信息按钮</el-button>
                    <el-button type="warning">警告按钮</el-button>
                    <el-button type="danger">危险按钮</el-button>
                </el-button-group>
            </div>

            <!--  表格开始           -->
            <template>
                <el-table
                        :data="tableData"
                        border
                        style="width: 80%">
                    <el-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="province"
                            label="省份"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="400">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!--  表格结束           -->

            <!--  分页开始          -->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="100"
                    layout="sizes,total,prev, pager, next"
                    :total="1000">
            </el-pagination>

            <!--  弹窗 开始         -->
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="40%">

            <!--  表单  开始            -->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="即时配送">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="活动性质">
                        <el-checkbox-group v-model="form.type">
                            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                            <el-checkbox label="地推活动" name="type"></el-checkbox>
                            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="特殊资源">
                        <el-radio-group v-model="form.resource">
                            <el-radio label="线上品牌商赞助"></el-radio>
                            <el-radio label="线下场地免费"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="活动形式">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
                <!--  表单  结束            -->

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
            <!--  弹窗 结束         -->

            <!--  描述弹窗          -->
            <el-dialog title="描述弹窗" :visible.sync="dialogFormVisible_1" width="50%">
                <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
                    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                    <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-tag size="small">学校</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                </el-descriptions>

                <el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
                    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                    <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-tag size="small">学校</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                </el-descriptions>
            </el-dialog>
            <!--  描述弹窗结束          -->
        </div>
    </el-card>
</div>
<script>
    var Main = {
        data() {
            return {
                //打开弹窗
                dialogFormVisible: false,
                //描述弹窗
                dialogFormVisible_1:false,
                //表单参数
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '80px',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        },
        created(){
            this.$message('初始化创建');
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
            onSubmit(){
                let data=this.form;
                this.$message('创建的信息：'+JSON.stringify(data));
                this.dialogFormVisible=false;
            },
            open() {
                this.$message('这是一条消息提示');
            },
            //分页
            handleCurrentChange(val) {
                this.$message('当前页'+val);
            },
            //页码发生改变
            handleSizeChange(val) {
                this.$message('当页每页：'+val+'条');
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>